<template>
	<view class="page-content" style="background-color: #fff;">
		<view class="top-view">
			<u-navbar :placeholder="true" bgColor="#fff" ref="nbar">
				<view class="u-nav-slot" slot="left">
					<u-image src="@/static/img/tabbar/homeactive.png" width="50rpx" height="50rpx" mode="scaleToFill"
						@click="goIndex"></u-image>
				</view>
			</u-navbar>
		</view>

		<view style="padding: 40rpx;">
			<view class="top1">
				欢迎使用小程序
			</view>
			<view class="top2" v-if="type==1">
				登陆查看更多内容
			</view>
		</view>

		<view class="formBlock">
			<view>
				<input class="uni-input minput" placeholder="请输入手机号" type="number" v-model="subData.phone" />
				<u-line direction="row" color="#999999"></u-line>
			</view>
			<view>
				<view class="display_row_btn_center">
					<input class="uni-input minput" placeholder="请输入验证码" v-model="subData.code" />
					<view>
						<u-code seconds="120" @end="end" @start="start" ref="uCode" @change="codeChange" keep-running
							change-text="XS重新获取"></u-code>
						<u-button @tap="getVCode" :text="tips"></u-button>
					</view>
				</view>
				<u-line direction="row" color="#999999"></u-line>
			</view>
			<view v-if="type==2">
				<input class="uni-input minput" placeholder="请输入邀请码" v-model="subData.from" />
				<u-line direction="row" color="#999999"></u-line>
			</view>
		</view>

		<view class="regbox" v-if="type==1">
			<u-button text="注册账户" size="small" type="warning" class="button-layout__item" :customStyle='{width:"100rpx",position: "absolute",
		right: "40rpx",
		top: "0"}' @click="regClick">
			</u-button>
		</view>

		<view class="btnBox">
			<view class=" btmBox c_ffffff" style="margin-bottom: 60rpx;" @click="doNext">
				{{type==1?"登陆":"注册"}}
			</view>
		</view>

		<view class="loginWc" @click="wcLogin">
			<u-line direction="row" color="#999999"></u-line>
			<image src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E5%BE%AE%E4%BF%A1.png"
				style="width: 80rpx;height: 80rpx;margin-top: 10rpx;"></image>
			<text style="color:#999">微信登陆</text>
		</view>

		<m-login ref="login" :zIndex="1000000000" @success="loginRes" @error="loginError"></m-login>

	</view>
</template>

<script>
	import {
		getCode,
		phoneRegOrLogin
	} from '@/config/api.js'

	export default {
		data() {
			return {
				tips: '',
				type: 1,
				subData: {
					phone: "",
					code: "",
					from: "",
					type: 1,
					opneId: ""
				},
				user: null
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('UserInfo', null);
			this.subData.opneId = this.user.openid1;
		},
		methods: {
			doNext() {
				if (!uni.$u.test.mobile(this.subData.phone)) {
					uni.$u.toast('手机号错误！');
					return;
				}
				if (!uni.$u.test.code(this.subData.code)) {
					uni.$u.toast('验证码错误！');
					return;
				}
				if (this.type == 2 && this.subData.from == "") {
					uni.$u.toast('请输入邀请码！');
					return;
				}

				this.subData.type = this.type;

				phoneRegOrLogin(this.subData).then(res => {
					uni.setStorageSync('UserInfo', res || {});
					uni.setStorageSync('UserToken', res.token.token || '');
					uni.showToast({
						icon: 'none',
						title: '操作成功！',
						duration: 2000
					});
					this.goIndex();
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.info,
						duration: 2000
					});
				})
			},
			regClick() {
				this.type = 2;
			},
			loginError(err) {
				// this.ivcode = '';
				// uni.removeStorageSync('ivcode');
				if (err.code == 0 && err.info == "请注册！") {
					this.isRegister = true;
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '未注册！',
					// 	duration: 2000
					// });
					// this.showPpo();
				}
			},
			loginRes() {
				this.goIndex();
			},
			wcLogin() {
				this.$refs.login.checkLogin();
			},
			goIndex() {
				uni.switchTab({
					url: "/pages/tabbar/tabbar-1/tabbar-1"
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getVCode() {
				if (!uni.$u.test.mobile(this.subData.phone)) {
					uni.$u.toast('手机号错误！');
					return;
				}

				if (this.$refs.uCode.canGetCode) {
					getCode({
						phone: this.subData.phone
					}).then(res => {
						this.$refs.uCode.start();
					}).catch(err => {

					})
				} else {
					uni.$u.toast('请120秒后再获取');
				}
			},
			end() {},
			start() {
				uni.$u.toast('短信已发送');
			}
		}
	}
</script>

<style scoped>
	.formBlock {
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		margin-top: 50rpx;
	}

	.minput {
		height: 40px;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.top1 {
		color: #000;
		font-weight: 700;
		font-size: 50rpx
	}

	.top2 {
		color: #000;
		font-weight: 600;
		font-size: 36rpx;
		margin-top: 8rpx;
	}

	.btnBox {
		margin-top: 40rpx;
	}

	.loginWc {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding: 0 40rpx;
	}

	.regbox {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		margin-top: 20rpx;
		position: relative;
		height: 40rpx;
	}
</style>
